<template>
  <view class="health-social-card mb-[16rpx]">
    <view class="card-container bg-white rounded-[12rpx] shadow-[0_2rpx_8rpx_rgba(0,0,0,0.06)] border border-gray-100 overflow-hidden transition-all duration-200 hover:shadow-[0_4rpx_16rpx_rgba(59,130,246,0.12)]">
      
      <!-- 主要内容区域 -->
      <view class="main-content p-[20rpx]">
        <!-- 头部：姓名和操作按钮 -->
        <view class="header-row flex items-start justify-between mb-[16rpx]">
          <!-- 左侧：姓名 -->
          <view class="name-section flex-1">
            <text class="name text-[32rpx] text-gray-800 font-semibold leading-tight">{{ record.name || '未填写' }}</text>
          </view>
          
          <!-- 右侧：操作按钮 -->
          <view class="action-buttons flex gap-[8rpx]">
            <view class="btn-edit w-[48rpx] h-[48rpx] rounded-full bg-blue-50 border border-blue-200 flex items-center justify-center transition-all duration-200 hover:bg-blue-100 active:scale-95" @click.stop="goEdit(record.id)">
              <IconFont name="edit" class="text-blue-600 text-[20rpx]" />
            </view>
            <view class="btn-delete w-[48rpx] h-[48rpx] rounded-full bg-red-50 border border-red-200 flex items-center justify-center transition-all duration-200 hover:bg-red-100 active:scale-95" @click.stop="deleteRecord(record.id)">
              <IconFont name="del" class="text-red-600 text-[20rpx]" />
            </view>
          </view>
        </view>

        <!-- 核心信息标签 -->
        <view class="info-tags mb-[16rpx]">
          <view class="tags-row flex flex-wrap gap-[8rpx]">
            <view class="tag bg-blue-50 px-[10rpx] py-[4rpx] rounded-[8rpx] border border-blue-100">
              <text class="text-blue-600 text-[20rpx] font-medium">{{ record.education || '未填写' }}</text>
            </view>
            <view class="tag bg-purple-50 px-[10rpx] py-[4rpx] rounded-[8rpx] border border-purple-100">
              <text class="text-purple-600 text-[20rpx] font-medium">{{ record.workType || '未填写' }}</text>
            </view>
            <view class="tag bg-green-50 px-[10rpx] py-[4rpx] rounded-[8rpx] border border-green-100">
              <text class="text-green-600 text-[20rpx] font-medium">{{ record.liveIncome ? record.liveIncome + '元/月' : '未填写' }}</text>
            </view>
          </view>
        </view>

        <!-- 详细信息网格 -->
        <view class="info-grid">
          <view class="grid-row flex mb-[12rpx]">
            <view class="info-item flex-1 mr-[12rpx]">
              <text class="label text-[18rpx] text-gray-500 mb-[2rpx] block">工作单位</text>
              <text class="value text-[22rpx] text-gray-800 font-medium">{{ record.workUnit || '未填写' }}</text>
            </view>
            <view class="info-item flex-1">
              <text class="label text-[18rpx] text-gray-500 mb-[2rpx] block">医保类型</text>
              <text class="value text-[22rpx] text-gray-800 font-medium">{{ record.mediType || '未填写' }}</text>
            </view>
          </view>
          
          <view class="grid-row flex mb-[12rpx]">
            <view class="info-item flex-1 mr-[12rpx]">
              <text class="label text-[18rpx] text-gray-500 mb-[2rpx] block">住房性质</text>
              <text class="value text-[22rpx] text-gray-800 font-medium">{{ record.houseType || '未填写' }}</text>
            </view>
            <view class="info-item flex-1">
              <text class="label text-[18rpx] text-gray-500 mb-[2rpx] block">经济来源</text>
              <text class="value text-[22rpx] text-gray-800 font-medium">{{ record.econoSource || '未填写' }}</text>
            </view>
          </view>
          
          <view class="grid-row">
            <view class="info-item">
              <text class="label text-[18rpx] text-gray-500 mb-[2rpx] block">常住地址</text>
              <text class="value text-[22rpx] text-gray-800 font-medium">{{ record.liveAddr || '未填写' }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed, PropType } from "vue";
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";

const emit = defineEmits(["edit", "delete"]);

const props = defineProps({
  record: {
    type: Object as PropType<any>,
  },
});

function toggleDetail(id: string) {
  // 可以在这里添加展开详情的逻辑
}

function goEdit(id: string) {
  emit("edit", id);
}

async function deleteRecord(id: string) {
  emit("delete", id);
}
</script>

<style lang="scss" scoped>
.health-social-card {
  .card-container {
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2rpx;
      background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    }
  }
  
  .name {
    text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.03);
  }
  
  .tag {
    transition: all 0.2s ease;
    
    &:hover {
      transform: translateY(-1rpx);
      box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
    }
  }
  
  .btn-edit, .btn-delete {
    cursor: pointer;
    
    &:active {
      transform: scale(0.95);
    }
  }
  
  .info-item {
    .value {
      word-break: break-all;
      line-height: 1.4;
    }
  }
  
  .info-grid {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 8rpx;
    padding: 12rpx;
    border: 1rpx solid #e2e8f0;
  }
}
</style>